<template>
	<view>
		<view>
			<uni-section title="" subTitle="" type="line" style="margin-bottom: 3px;">
				<view class="box-bg">
					<!--适应手机状态栏的高度-->
					<view class="status_bar"
						style="height: var(--status-bar-height); width: 100%; background-color: #245b9f;">
					</view>
					<!--手机导航栏-->
					<uni-nav-bar dark @clickLeft="back" color="#eee" backgroundColor="#245b9f" height="44"
						left-icon="left" title="升下井记录" leftText="">
						<block slot="right">
							<view>
								<picker mode="selector" :value="index" :range="range" @change="bindDateChange"
									style="display: inline-block;">
									<view class="uni-input">{{currentYear}}年</view>
									<!-- <view class="uni-input" v-if="">{{year}}年</view> -->
								</picker>
								<u-icon name="arrow-down" color="#fff"
									style="display: inline-block; margin: 5px 5px 5px 5px;"></u-icon>
							</view>
						</block>
					</uni-nav-bar>
				</view>
			</uni-section>
			<view class="uni-list" style="margin-left: 350px;">
				<view class="uni-list-cell">
					<view class="uni-list-cell-db">

					</view>
				</view>
			</view>
		</view>
		<uni-card class="top">
			<view class="bg">
				<text>年度升下井统计</text>
			</view>
			<view class="totalNumber">
				<view class="left">
					<image class="leftImg" src="../../../static/images/fenxi/zcs.png">
					</image>
					<text class="leftNum1">{{frequency}}<text class="leftNum2">次</text></text>
					<p class="leftLine"></p>
					<text class="leftText">总次数</text>
				</view>
				<view class="right">
					<image class="rightImg" src="../../../static/images/fenxi/zry.png">
					</image>
					<text class="rightNum1">{{people}}<text class="rightNum2">人</text></text>
					<p class="rightLine"></p>
					<text class="rightText">总人员</text>
				</view>
			</view>
		</uni-card>
		<uni-card class="bottom">
			<view class="bg">
				<text>升下井次数统计</text>
			</view>
			<qiun-data-charts type="area" :opts="opts" :chartData="chartData" />
		</uni-card>
	</view>
</template>

<script>
	import {
		recordList
	} from "@/api/record.js";
	export default {
		data() {
			return {
				range: [],
				currentYear: new Date().getFullYear(), //获取当前年份
				frequency: "",
				index: 0,
				statusBarHeight: '',
				menuButtonObject: '',
				people: "",
				recordListData: {},
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#1890FF"],
					padding: [15, 10, 0, 15],
					legend: {
						show: false,
					},
					xAxis: {
						fontSize: 10,
						disableGrid: true,
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						showTitle: true,
						data: [{
							min: 0,
							title: "(次)",
						}, ],
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
						},
					},
				},
			};
		},
		watch: {
			recordListData: function(newVal) {
				this.frequency = newVal.yearUpAndDownCount.frequency
				this.people = newVal.yearUpAndDownCount.people
			}
		},

		onLoad() {
			for (let i = this.currentYear - 60; i <= this.currentYear; i++) {
				this.range.push(i)
			}
			this.range.reverse()

		},
		onReady() {
			this.getServerData();
			this.getRecordList(this.currentYear);
		},
		methods: {
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接

				}, 500);
			},

			getRecordList(data) {
				recordList(data)
					.then((result) => {
						this.recordListData = result.data;

						let res = {
							categories: this.recordListData.yearByMonthCount.x,
							series: [{
								data: this.recordListData.yearByMonthCount.y,
							}, ],
						};
						this.chartData = JSON.parse(JSON.stringify(res));
					})
					.catch((err) => {
						console.log(err);
					});
			},
			bindDateChange(e) {
				this.currentYear = this.range[e.detail.value]
				this.getRecordList(this.currentYear)
				this.index = e.detail.value // 弹出框关闭以后在出发bindDateChange事件数据还是在上次选择上
			},
			// 自定义菜单点击返回
			back() {
				this.$tab.switchTab("/pages/analyse/index");
			}
		},
	};
</script>

<style lang="scss" scoped>
	.top {
		.bg {
			height: 80rpx;
			line-height: 80rpx;
			padding-left: 20rpx;
			margin-left: -40rpx;
			margin-top: -22rpx;
			background-image: url(../../../static/images/fenxi/jx01.png);
			background-size: 300rpx 80rpx;
			background-repeat: no-repeat;
			color: #185f9a;
			font-size: 32rpx;
			font-weight: 700;
		}

		.totalNumber {
			display: flex;
			justify-content: space-between;
			margin-top: 44rpx;
		}

		.left {
			width: 306rpx;
			height: 324rpx;
			background-image: url("../../../static/images/fenxi/zcszrsbj.png");
			background-size: 306rpx 324rpx;
		}

		.leftImg {
			width: 112rpx;
			height: 112rpx;
			margin: 32rpx 98rpx;
		}

		.leftNum1 {
			font-size: 60rpx;
			font-style: italic;
			font-weight: 600;
			color: #3d909a;
			display: flex;
			justify-content: center;

			.leftNum2 {
				font-size: 30rpx;
			}
		}

		.leftText {
			font-size: 28rpx;
			font-weight: 700;
			margin-top: 10rpx;
			display: flex;
			justify-content: center;
		}

		.leftLine {
			margin-top: 10rpx;
			width: 166px;
			height: 1px;
			border-top: 1px solid;
			border-image: linear-gradient(270deg,
					rgba(229, 229, 229, 0),
					rgba(191, 191, 191, 1),
					rgba(191, 191, 191, 0)) 1 1;
		}

		.right {
			width: 306rpx;
			height: 324rpx;
			background-image: url("../../../static/images/fenxi/zcszrsbj.png");
			background-size: 306rpx 324rpx;
		}

		.rightImg {
			width: 112rpx;
			height: 112rpx;
			margin: 32rpx 98rpx;
		}

		.rightNum1 {
			font-size: 60rpx;
			font-style: italic;
			font-weight: 600;
			color: #3d909a;
			display: flex;
			justify-content: center;

			.rightNum2 {
				font-size: 30rpx;
			}
		}

		.rightText {
			font-size: 28rpx;
			font-weight: 700;
			margin-top: 10rpx;
			display: flex;
			justify-content: center;
		}

		.rightLine {
			margin-top: 10rpx;
			width: 166px;
			height: 1px;
			border-top: 1px solid;
			border-image: linear-gradient(270deg,
					rgba(229, 229, 229, 0),
					rgba(191, 191, 191, 1),
					rgba(191, 191, 191, 0)) 1 1;
		}
	}

	.bottom {
		.bg {
			height: 80rpx;
			line-height: 80rpx;
			padding-left: 20rpx;
			margin-left: -40rpx;
			margin-top: -22rpx;
			background-image: url(../../../static/images/fenxi/jx01.png);
			background-size: 300rpx 80rpx;
			background-repeat: no-repeat;
			color: #185f9a;
			font-size: 32rpx;
			font-weight: 700;
		}
	}

	::v-deep .uni-navbar__header-btns-right[data-v-6bda1a90] {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		width: 88px !important;
	}

	// #ifdef APP-PLUS
	::v-deep .uni-navbar__header-btns-right[data-v-6bda1a90] {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		width: 88px !important;
	}

	.box1 {
		.charts-box {
			.sg {
				width: 19%;
				height: 8%;
				position: absolute;
				left: 41%;
				top: 32% !important;
			}
		}
	}

	// #endif


	.u-popup div {
		z-index: 999 !important;
	}
</style>
